<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>NextMap</title>
  <%= stylesheet_link_tag 'scaffold' %>
  <%= stylesheet_link_tag 'style' %>

<%= javascript_include_tag  :defaults %>

	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAANO6Yx8ihhesSqnPHx9a3RxSa1yJtiLq-5KR8udZJ770z18Ki9hQkK2slV81cQPOBEeAMg41G27Xj2A" type="text/javascript"></script>
	<script type="text/javascript">
	
	function initialize() {
	  if (GBrowserIsCompatible()) {
	    var map = new GMap2(document.getElementById("map_canvas"));
	    map.setCenter(new GLatLng(42.359257, -71.095898), 16);
		map.setMapType(G_HYBRID_MAP);
		var mapControl = new GMapTypeControl();
		map.addControl(mapControl);
		map.addControl(new GLargeMapControl());

		<% for ping in @pings %>
		
			var latitude = <%= ping.latitude %>;
			var longitude = <%= ping.longitude %>;
			
			var point = new GLatLng(latitude,longitude);
			var icon = new GIcon(G_DEFAULT_ICON);
			icon.image = "/images/stem-ff6549-orange.png";
			icon.iconSize = new GSize(10,10);
		  	markerOptions = { icon:icon };
			var marker = new GMarker(point,markerOptions);
			map.addOverlay(marker);
			
// Sandy: added click event listener to each marker
			GEvent.addListener(marker, "click", function() {
				<%= remote_function(:update => "detailbox",
				      :url => { :action => :show_ping, :ping_id => ping.id }) %>
			});
			
			var label = new TLabel();
			label.id = '<%= ping.id %>';
			label.anchorLatLng = point;
			label.anchorPoint = 'bottomCenter';
			label.markerOffset = new GSize (0,23);
			
			label.content = "<p style='padding:6px 8px;font-weight:bold;text-align:center;color:#fff;width:100px;background:#ff6549;font-size:.8em;'><a style='color:#fff;' href='#' onclick=\"new Ajax.Updater('detailbox', '/map/show_ping?ping_id=<%= ping.id %>', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('c7569111c121d19841b7001b3a676d09ede2023e')}); return false;\"><%= ping.message %></a></p>"
			
//			label.content = "<p style='padding:6px 8px;font-weight:bold;text-align:center;color:#fff;width:100px;background:#ff6549;font-size:.8em;'><input id='ping_<%= ping.id %>' style='vertical-align:bottom;' type='checkbox' /> <label for='ping_<%= ping.id %>'><%= ping.message %></label></p>";
			label.percentOpacity = 80;
			map.addTLabel(label);
					
		<% end %>
		
		<%= remote_function(:update => "detailbox",
		      :url => { :action => :show_ping, :ping_id => @pings[0] }) %>
	  }
	}
	
	function show_ping() {
		<%= remote_function(:update => "detailbox",
		      :url => { :action => :show_ping, :ping_id => @pings[0] }) %>
	}
	</script>
	<script src="/javascripts/tlabel.2.05.js" type="text/javascript"></script>
	<style type="text/css" media="screen">
		html {background:#f8f8f8;}
		body {width:1480px;margin:30px;padding:40px 30px;}
		i {color:#FF6549;}
		h1 {font-family:georgia;font-weight:normal;font-size:4em;}
		input.output {
			float:left;
		}
		.button {
			color:#fff;
			padding:20px;
			background:#FF6549;
			float:left;
			display:block;
			margin-right:12px;
			font-size:1.4em;
		}
		a:hover.button {
			background:#EE5438;
		}
	</style>

</head>
<body onload="initialize()" onunload="GUnload()">

<h1><i>NextMap:</i> Send SMS to 617 515 4207</h1>

<p style="color: green"><%= flash[:notice] %></p>

<p id="navigation">
	<a href="/">Map</a> | 
	<a href="/messages">Messages</a> | 
	<a href="/pings">Pings</a> | 
	<a href="/phones">Phones</a> | 
	<a href="http://nextlab.mit.edu/fall2008/nextmap/">About</a>
</p>

<p><b>"<i>locate</i> 20 Ames street 02139" or "<i>message</i> look out for sox fans"</b></p>


<div style="float: left">
<div id="map_canvas" style="width: 800px; height: 600px"></div>

<p style="font-size:1.5em;font-family:georgia;">
	<a class="button" href="javascript:void(0);">Send</a> <input style="font-size:2.2em;" type="text" id="outgoing" /> <br /><br />
	<label for="outgoing">Send a message to the selected recipients</label>
</p>
</div>

<div id="detailbox" onload='show_ping()'></div>

</body>
</html>